<template>
  <div class="my-container">
    <div class="top-container">
      <div class="top">
        <div class="top-left">
          <h2 class="title">{{ userInfo.nickname }}</h2>
          <p class="sub-title">{{ userInfo.intro }}</p>
        </div>
        <div class="top-right">
          <img :src="avatarUrl" alt="" @click="jumpUserInfo" />
        </div>
      </div>
      <div class="bottom">
        <ul>
          <li>
            <span class="num">123</span>
            <span class="sub">累计答题</span>
          </li>
          <li>
            <span class="num">231</span>
            <span class="sub">收藏题目</span>
          </li>
          <li>
            <span class="num">998</span>
            <span class="sub">我的错题</span>
          </li>
          <li>
            <span class="num">76<i>%</i></span>
            <span class="sub">正确率</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom-container">
      <MMcell
        class="circle position-cell"
        icon="iconicon_mine_gangwei"
        :value="userInfo.position"
        title="产品经理"
        @click="toEditInfo"
      >
      </MMcell>
      <!-- 面经数据 -->
      <div class="data-container">
        <h2>面经数据</h2>
        <ul>
          <li>
            <div class="top">昨日阅读<span>+300</span></div>
            <div class="mid">17</div>
            <div class="bottom">阅读总数</div>
          </li>
          <li>
            <div class="top">昨日获赞<span>+300</span></div>
            <div class="mid">17</div>
            <div class="bottom">获赞总数</div>
          </li>
          <li>
            <div class="top">昨日新增<span>+300</span></div>
            <div class="mid">17</div>
            <div class="bottom">评论总数</div>
          </li>
        </ul>
      </div>
      <!-- 一堆cell -->
      <div class="cell-container">
        <MMcell icon="iconicon_mine_mianjing" title="我的面经分享" value="21">
        </MMcell>
        <MMcell
          icon="iconicon_mine_xiaoxi"
          title="我的消息"
          value="89"
          @click="jumpMessage"
        >
        </MMcell>
        <MMcell icon="iconicon_mine_tikushoucang" title="收藏的题库" value="32">
        </MMcell>
        <MMcell icon="iconicon_mine_qiyeshoucang" title="收藏的企业" value="32">
        </MMcell>
        <MMcell icon="iconicon_mine_cuoti" title="我的错题" value="123">
        </MMcell>
        <MMcell icon="iconxingxing2" title="收藏的面试经验" value="166">
        </MMcell>
      </div>
    </div>
  </div>
</template>

<script>
import MMcell from '@/components/MMcell'
// 辅助函数
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'my',
  components: {
    MMcell
  },
  // 计算属性
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['avatarUrl'])
  },
  methods: {
    jumpUserInfo () {
      this.$router.replace('/userInfo')
    },
    jumpMessage () {
      this.$router.replace('/message')
    },
    toEditInfo () {
      this.$router.replace('/editInfo?prop=position&url=my')
    }
  }
}
</script>

<style scoped lang="less">
.my-container {
  .top-container {
    background-color: @main-color;
    padding-top: 31px;
    padding-bottom: 55px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 15px;
      padding-right: 37px;
      .top-left {
        .title {
          font-size: 21px;
          color: @white-color;
        }
        .sub-title {
          margin-top: 6px;
          opacity: 0.7;
          font-size: 12px;
          color: @white-color;
        }
      }
      .top-right {
        img {
          border-radius: 50%;
          width: 50px;
          height: 50px;
          border: 3px solid @subdominant-font-color;
        }
      }
    }
    .bottom {
      padding-left: 23px;
      padding-right: 30px;
      ul {
        display: flex;
        justify-content: space-between;
        margin-top: 31px;
        li {
          span {
            color: @white-color;
            display: block;
            text-align: center;
            &.num {
              font-size: 21px;
            }
            &.sub {
              margin-top: 6px;
              font-size: 12px;
              opacity: 0.7;
            }
            i {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .bottom-container {
    background-color: @black-color;
    padding: 15px;
    position: relative;
    .circle {
      border-radius: 8px;
    }
    .data-container {
      background-color: @white-color;
      padding-top: 19px;
      padding-left: 15px;
      padding-bottom: 16px;
      margin-top: 10px;
      border-radius: 8px;
      h2 {
        font-size: 14px;
        margin-top: 0;
      }
      ul {
        display: flex;
        justify-content: space-around;
        li {
          text-align: center;
          .top {
            color: @subdominant-font-color;
            font-size: 10px;
            span {
              color: @assist-color;
            }
          }
          .mid {
            font-weight: 900;
            font-size: 21px;
            margin-top: 10px;
          }
          .bottom {
            font-size: 12px;
            margin-top: 6px;
          }
        }
      }
    }
  }
  // 第一个cell的定位
  .position-cell {
    position: absolute;
    top: -36px;
  }
  .cell-container {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>
